<template>
    <div class="loanStaging">
      <template v-if="userType == 1">
        <div class="input-item">
          <label>姓名</label>
          <input type="text" name="name" v-model="userInfo.name" placeholder="请输入姓名"/>
        </div>
        <div class="input-item">
          <label>性别</label>
          <div class="item-radio">
            <label :class="{'is-checked':userInfo.sex==1}" @click="userInfo.sex=1"><i></i><input class="radio" hidden
                                                                                                 type="radio"
                                                                                                 v-model="userInfo.sex"
                                                                                                 value="1"/>男</label>
            <label :class="{'is-checked':userInfo.sex==2}"  @click="userInfo.sex=2"><i></i><input class="radio" hidden
                                                                                                  type="radio"
                                                                                                  v-model="userInfo.sex"
                                                                                                  value="2"/>女</label>
          </div>
        </div>
        <div class="input-item">
          <label>身份证号</label>
          <input type="text" name="id_number" v-model="userInfo.id_number" placeholder="请输入身份证号"/>
        </div>
        <div class="input-item">
          <label>邮箱</label>
          <input type="text" name="email" v-model="userInfo.email" placeholder="请输入邮箱"/>
        </div>
        <div class="input-item">
          <label>贷款金额</label>
          <input type="number" name="amount" v-model="userInfo.amount" placeholder="请输入贷款金额"/>
        </div>
        <div class="input-item">
          <label>贷款期数</label>
          <input type="number" name="periods" disabled v-model="userInfo.periods"/>
        </div>
        <div class="input-item" @click="changeAddress('home')">
          <label>家庭地址</label>
          <div>
            <span>{{address1.province.name}}</span>
            <span>{{address1.city.name}}</span>
            <span>{{address1.area.name}}</span>
            <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
          </div>
        </div>
        <div class="input-item">
          <label>家庭详细地址</label>
          <input type="text" name="home_address" v-model="userInfo.home_address" placeholder="请输入家庭详细地址"/>
        </div>
        <div class="input-item">
          <label>月薪</label>
          <input type="number" name="monthly_salary" v-model="userInfo.monthly_salary" placeholder="请输入月薪"/>
        </div>
        <div class="input-item">
          <label>联系人姓名</label>
          <input type="text" name="other_person" v-model="userInfo.other_person" placeholder="请输入紧急联系人姓名"/>
        </div>
        <div class="input-item">
          <label>联系人电话</label>
          <input type="number" name="other_phone" v-model="userInfo.other_phone" placeholder="请输入姓名"/>
        </div>
        <div class="input-item">
          <label>公司名</label>
          <input type="text" name="company_name" v-model="userInfo.company_name" placeholder="请输入公司名"/>
        </div>
        <div class="input-item">
          <label>公司电话</label>
          <input type="text" name="company_phone" v-model="userInfo.company_phone" placeholder="请输入公司电话"/>
        </div>
        <div class="input-item" @click="changeAddress('work')">
          <label>公司地址</label>
          <div>
            <span>{{address2.province.name}}</span>
            <span>{{address2.city.name}}</span>
            <span>{{address2.area.name}}</span>
            <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
          </div>
        </div>
        <div class="input-item">
          <label>公司详细地址</label>
          <input type="text" name="work_address" v-model="userInfo.work_address" placeholder="请输入公司详细地址"/>
        </div>
        <div class="item-radio es">
          <span>是否保费分期</span>
          <label :class="{'is-checked':isInsurance==1}" @click="isInsurance=1"><i></i><input class="radio" hidden
                                                                                                                     type="radio"
                                                                                                                     v-model="isInsurance"
                                                                                                                     value="1"/>是</label>
          <label :class="{'is-checked':isInsurance==0}"  @click="isInsurance=0"><i></i><input class="radio" hidden
                                                                                                                      type="radio"
                                                                                                                      v-model="isInsurance"
                                                                                                                      value="0"/>否</label>
        </div>
      </template>
      <template v-if="userType == 2">
        <div class="input-item">
          <label>企业名</label>
          <input type="text" name="company_name" v-model="enterpriseInfo.company_name" placeholder="请输入企业名"/>
        </div>
        <div class="input-item">
          <label>社会统一编码</label>
          <input type="text" name="social_coding" v-model="enterpriseInfo.social_coding" placeholder="请输入社会统一编码"/>
        </div>
        <div class="input-item">
          <label>固定电话</label>
          <input type="text" name="fixed_phone" v-model="enterpriseInfo.fixed_phone" placeholder="请输入固定电话号码"/>
        </div>
        <div class="input-item">
          <label>对公账号</label>
          <input type="text" name="public_household" v-model="enterpriseInfo.public_household" placeholder="请输入对公账号"/>
        </div>
        <div class="input-item">
          <label>联系人姓名</label>
          <input type="text" name="contact_name" v-model="enterpriseInfo.contact_name" placeholder="请输入联系人姓名"/>
        </div>
        <div class="input-item">
          <label>联系人电话</label>
          <input type="number" name="contact_phone" @blur="verifyPhone(enterpriseInfo.contact_phone)" v-model="enterpriseInfo.contact_phone" placeholder="请输入电话号码"/>
        </div>
        <div class="input-item">
          <label>贷款金额</label>
          <input type="number" name="amount" v-model="enterpriseInfo.amount" placeholder="请输入贷款金额"/>
        </div>
        <div class="input-item">
          <label>贷款期数</label>
          <input type="number" name="periods" disabled v-model="enterpriseInfo.periods" />
        </div>
        <div class="input-item">
          <label>法人姓名</label>
          <input type="text" name="card_name" v-model="enterpriseInfo.card_name" placeholder="请输入姓名"/>
        </div>
        <div class="input-item">
          <label>法人性别</label>
          <div class="item-radio">
            <label :class="{'is-checked':enterpriseInfo.sex==1}" @click="enterpriseInfo.sex=1"><i></i><input class="radio" hidden
                                                                                                             type="radio"
                                                                                                             v-model="enterpriseInfo.sex"
                                                                                                             value="1"/>男</label>
            <label :class="{'is-checked':enterpriseInfo.sex==2}"  @click="enterpriseInfo.sex=2"><i></i><input class="radio" hidden
                                                                                                              type="radio"
                                                                                                              v-model="enterpriseInfo.sex"
                                                                                                              value="2"/>女</label>
          </div>
        </div>
        <div class="input-item">
          <label>法人身份证号</label>
          <input type="text" name="id_number" v-model="enterpriseInfo.id_number" placeholder="请输入身份证号"/>
        </div>
        <div class="input-item" @click="changeAddress('company')">
          <label>公司地址</label>
          <div>
            <span>{{address1.province.name}}</span>
            <span>{{address1.city.name}}</span>
            <span>{{address1.area.name}}</span>
            <i class="iconfont icon-fa-angle-right-copy" style="color:#999 "></i>
          </div>
        </div>
        <div class="input-item">
          <label>公司详细地址</label>
          <input type="text" name="company_address" v-model="enterpriseInfo.company_address" placeholder="请输入公司详细地址"/>
        </div>
        <div class="item-radio es">
          <span>是否保费分期</span>
          <label :class="{'is-checked':isInsurance==1}" @click="isInsurance=1"><i></i><input class="radio" hidden
                                                                                                                     type="radio"
                                                                                                                     v-model="isInsurance"
                                                                                                                     value="1"/>是</label>
          <label :class="{'is-checked':isInsurance==0}"  @click="isInsurance=0"><i></i><input class="radio" hidden
                                                                                                                      type="radio"
                                                                                                                      v-model="isInsurance"
                                                                                                                      value="0"/>否</label>
        </div>
      </template>
      <button :class="{'es': isSubmit}" :disabled="!isSubmit" @click="nextPage">下一步</button>
      <my-address  @getAddress="getAddress" :mystyle="style" v-if="isShowAddress" @closeAddress="closeAddress"></my-address>
    </div>
</template>

<script>
  import CONFIG from './../../config'
  import {mapState} from 'vuex'
  import {isMobile} from "../../util";
  import address from './../common/Address'
  import provinces from './../../util/provinces'

  export default {
      name: "LoanStaging",
      data(){
        return {
          isShowAddress:false,
          currentAddressType:'',
          isInsurance:0,
          isAccept:false,
          provinces:provinces,
          style:'',
          address1:{
            province:{},
            city:{},
            area:{}
          },
          address2:{
            province:{},
            city:{},
            area:{}
          },
          userType:CONFIG.userType,
          city:[],
          area:[],
          city2:[],
          area2:[],
          userInfo:{
            name:'',
            sex:'',
            id_number:'',
            email:'',
            other_person:'',
            other_phone:'',
            home_province:'',
            home_city:'',
            home_area:'',
            home_address:'',
            work_city:'',
            work_province:'',
            work_area:'',
            work_address:'',
            company_name:'',
            company_phone:'',
            monthly_salary:'',
            card_face:'',
            card_back:'',
            amount:'',
            periods:'',
            products_id:'',
            insurance_type:'',
            file_type:''
          },
          enterpriseInfo: {
            company_name: '',
            social_coding: '',
            fixed_phone: '',
            public_household:'',
            contact_name:'',
            contact_phone:'',
            business_license:'',
            card_face:'',
            card_back:'',
            card_name:'',
            id_number:'',
            company_province:'',
            company_city:'',
            company_area:'',
            company_address:'',
            amount:'',
            periods:'',
            sex:'',
            file_type:'',
            insurance_type:''
          },
        }
      },
    components:{
      myAddress:address
    },
      computed:{...mapState({
        myUserInfo: state => state.user.userInfo,
      }),
      isSubmit(){
        if(this.userType == 1) {
          return this.userInfo.name && this.userInfo.sex && this.userInfo.id_number && this.userInfo.email && this.userInfo.other_person && this.userInfo.other_phone && this.userInfo.home_province && this.userInfo.home_city && this.userInfo.home_area && this.userInfo.home_address && this.userInfo.work_city && this.userInfo.work_province && this.userInfo.work_area && this.userInfo.work_address && this.userInfo.company_name  && this.userInfo.company_phone  && this.userInfo.monthly_salary   && this.userInfo.amount  && this.userInfo.periods
        }else {
          return this.enterpriseInfo.company_name && this.enterpriseInfo.social_coding && this.enterpriseInfo.fixed_phone  && this.enterpriseInfo.public_household && this.enterpriseInfo.contact_name  && this.enterpriseInfo.contact_phone  && this.enterpriseInfo.amount  && this.enterpriseInfo.periods  && this.enterpriseInfo.card_name  && this.enterpriseInfo.sex  && this.enterpriseInfo.id_number  && this.enterpriseInfo.company_province   && this.enterpriseInfo.company_city  && this.enterpriseInfo.company_area  && this.enterpriseInfo.company_address
        }
      }
    },
    mounted(){
      if(this.myUserInfo.id){
          this.handleInfo(JSON.parse(JSON.stringify(this.myUserInfo)))
        }else {
          this.$store.dispatch('getUserInfoAction').then((res)=>{
            this.handleInfo(res);
          })
      }
    },
    methods:{
      closeAddress(){
        this.isShowAddress = false;
        setTimeout(()=>{
          this.style = 'transform: translateY(100%);';
        },0)
      },
      verifyPhone(phone) {
        //验证是否为手机号
        if (!isMobile(phone)) {
          this.$toast('手机号格式不正确')
        }
      },

      changeAddress(type){
        this.isShowAddress = true;
        setTimeout(()=>{
          this.style = 'transform: translateY(0);';
        },0);
        //只有个人的时候才需要判断
        if(type){
          this.currentAddressType = type;
        }
      },

      getAddress(address){
        if(this.userType == 2){
          this.address1 = address;
          this.enterpriseInfo.company_province = address.province.id;
          this.enterpriseInfo.company_city = address.city.id || address.city.name;
          this.enterpriseInfo.company_area = address.area.id;
        }else {
          if(this.currentAddressType==='work'){
            this.address2 = address;
            this.userInfo.work_province = address.province.id;
            this.userInfo.work_city = address.city.id || address.city.name;
            this.userInfo.work_area = address.area.id;
          }else {
            this.address1 = address;
            this.userInfo.home_province = address.province.id;
            this.userInfo.home_city = address.city.id || address.city.name;
            this.userInfo.home_area = address.area.id;
          }
        }
        this.isShowAddress = false;
      },

      handleInfo(info){
        if(this.userType == 2){
          this.enterpriseInfo = info;
          this.enterpriseInfo.periods = this.$route.query.periods || 11;
          this.handleAddress(this.enterpriseInfo,'company',this.address1);
        }else {
          this.userInfo = info;
          this.userInfo.periods = this.$route.query.periods || 11;
          this.handleAddress(this.userInfo,'home',this.address1);
          this.handleAddress(this.userInfo,'work',this.address2);
        }
      },
       handleAddress(info,type,obj){
        let provinceName = type+'_province';
        let cityName = type +'_city';
        let areaName = type+'_area';
        if(!info[provinceName]){
          return;
        }
        let province = this.provinces[Number(info[provinceName])-1+''];
        if(province){
         obj.province = province;
        }else {
          return;
        }
        if(!isNaN(Number(info[cityName]))){
          this.$api.getAreas({city_id:info[cityName]}).then((res)=>{
            let area =  res.data[Number(info[areaName])-1+''];
            if(area){
             obj.area = area;
            }
          })
        }
        this.$api.getAreas({city_id:info[provinceName]}).then((res)=>{
          if(isNaN(Number(info[cityName]))){
            let area2 = res.data[Number(info[areaName])-1+''];
            if(area2){
              obj.area =area2;
            }
            obj.city = {}
          }else {
            let city = res.data[Number(info[cityName])-1+''];
            if(city){
             obj.city = city;
            }
          }
        });
      },

      nextPage(){
        let params = this.$route.query;
        let productId =  params.productId || '';
        let file_type = params.fileType || 1;
        if(this.userType == 1){
          this.userInfo.products_id = productId;
          this.userInfo.file_type = file_type;
          this.userInfo.insurance_type = this.isInsurance;
          delete this.userInfo.phone;
          this.submit('addLoanUserInfo',this.userInfo,file_type);
        }else if(this.userType == 2){
          this.enterpriseInfo.products_id = productId;
          this.enterpriseInfo.file_type = file_type;
          this.enterpriseInfo.insurance_type = this.isInsurance;
          this.enterpriseInfo.name = this.enterpriseInfo.company_name;
          delete this.enterpriseInfo.phone;
          this.submit('addLoanEnterpriseInfo',this.enterpriseInfo,file_type);
        }
      },
      submit(methodName,obj,file_type){
        this.$indicator.open();
        this.$api[methodName](obj).then((res)=>{
          this.$indicator.close();
          this.$toast({
            message: '填写成功',
            iconClass: 'iconfont icon-success',
            duration:1000
          });
          if(file_type == 1){
            this.$router.push({path:'carUpload',query:{loanId:res.data.loan_id}})
          }else if(file_type == 2 || file_type == 3){
            setTimeout(()=>{
              this.$toast('请去pc端上传资料');
              this.$router.push('/LoanAnnal')
            },1000)
          }
        }).catch((err)=>{
          this.$indicator.close();
          this.$msg(err,this.$toast);
        })
      }
    }
    }
</script>

<style lang="scss" scoped>
.loanStaging{
  width: 100%;
  .input-item{
    padding: 0 30px;
  }
  button{
    width:690px;
    height:88px;
    border-radius:6px;
    font-size:36px;
    font-weight:400;
    color:rgba(255,255,255,1);
    display: block;
    margin: 0 auto 30px auto;
    background: #ddd;
    &.es{
      background:rgba(231,31,24,1);
    }
  }
}
.item-radio {
  position: relative;
  overflow: hidden;
  padding: 0 30px;
  &.es{
    margin: 30px 0 60px 0;
  }
  label {
    width: auto;
    font-size: 30px;
    line-height: 30px;
    color:rgba(51,51,51,1);
    &:first-of-type{
      margin: 0 30px 0 0;
    }
    display: flex;
    align-items: center;
    float: left;
    &.is-checked {
      > i {
        background-color: #E71F18;
        border: none;
        &:after {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    }
    > i {
      width: 30px;
      height: 30px;
      border: 1px solid rgba(204, 204, 204, 1);
      border-radius: 50%;
      background-color: #fff;
      margin: 0 10px 0 0;
      position: relative;
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      &:after {
        width: 10px;
        height:10px;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform .15s ease-in;
      }
    }
  }
  >span{
    float: left;
    font-size:30px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:30px;
    margin: 0 30px 0 0;
  }
}
</style>
